<template>
	<view class="u-page">
		<text class="title">服务评价</text>
		<u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
			<u-form-item label-width="76" label="姓名:" prop="evaluater_name" borderBottom ref="evaluater_name">
				<u--input v-model="model1.evaluater_name" border="none" placeholder="请输入姓名"></u--input>
				<view style="color: red; margin-right: 20px;">*</view>
			</u-form-item>
			<u-form-item label-width="76" label="手机号:" prop="phone_number" borderBottom ref="phone_number">
				<u--input v-model="model1.phone_number" border="none" placeholder="请输入手机号"></u--input>
			</u-form-item>
			<u-form-item label-width="76" label="收货地址:" prop="contact_address" borderBottom ref="contact_address">
				<u--input v-model="model1.contact_address" border="none" placeholder="请输入收货地址"></u--input>
			</u-form-item>
			<u-form-item label-width="76" label="VIN码:" prop="vin" borderBottom ref="vin">
				<u--input v-model="model1.vin" border="none" placeholder="请输入VIN码" @blur="getVin"></u--input>
				<view style="color: red; margin-right: 20px;">*</view>
			</u-form-item>
			<u-form-item label-width="76" label="报修单号:" prop="warranty_number" borderBottom ref="warranty_number" class="bxdh">
				<u-row>
					<div id="app">
					    <input style="width: 279px;"
					      type="text"  :disabled=false
					      v-model="model1.warranty_number" 
					      @input="onInput"
					      @focus="showSuggestions = true"
					      @blur="hideSuggestions"
						  placeholder="请输入报修单号"
					    >
					    <ul v-if="showSuggestions">
					      <li v-for="(item, index) in filteredSuggestions" :key="index" @click="selectSuggestion(item)">
					        {{ item }}
					      </li>
					    </ul>
					</div>
					<view style="color: red; ">*</view>
				</u-row>
				<view>可在微信公众号"畅快体验"--"畅快服务"--"报修查询中找到</view>
			</u-form-item>
			<u-form-item label-width="105" label="服务星级评价:" prop="evaluate_mark" borderBottom  ref="evaluate_mark">
				<u-rate size="24px" gutter="10" active-color="#faea39ed" :count="count" v-model="evaluate_mark" @change="changestar" ref="starscore1"></u-rate>
			</u-form-item>
			<u-form-item  v-if="opiniondisplay" label-width="76" label="意见反馈:" prop="evaluate_opinion" borderBottom ref="evaluate_opinion">
				<u--textarea v-model="model1.evaluate_opinion"  :height="100" :auto-height="true" placeholder="请输入意见反馈"></u--textarea>
			</u-form-item>

			<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
			<u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button>
		</u--form>

	</view>
</template>

<script>
export default {
	data() {
		return {
			//searchQuery: '',
			//suggestions: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'],
			suggestions: [],
			showSuggestions: false,
			count: 5,
			evaluate_mark: 5,	
			opiniondisplay:false,
			model1: {
				/* userInfo: {
					name: '',
					mobile: '',
					address:'',
					repairorder:'',
					opinion:''
				}, */
				evaluater_name: '',
				phone_number: '',
				contact_address:'',
				vin:'',
				warranty_number:'',
				evaluate_mark:'',
				evaluate_opinion:''
			},
			rules: {
				'evaluater_name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change']
				},
				'phone_number':[ 
					/* {
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					}, */
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							if(value!=''&&value!=null&&value!=undefined){
								return this.$u.test.mobile(value);
							}
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				'vin': {
					type: 'string',
					required: true,
					message: '请填写VIN码',
					trigger: ['blur', 'change']
				},
				'warranty_number': {
					type: 'string',
					required: true,
					message: '请选择报修单号',
					trigger: ['blur', 'change']
				},
			},
			radio: '',
			switchVal: false
		};
	},
	onUnload(){
		console.log("onUnload..");
		uni.navigateTo({
			url: "/pages/mytable/evaluate/userevaluate/userevaluate"
		})
	},
	 computed: {
	    filteredSuggestions() {
	      return this.suggestions.filter(item =>
	        item.toLowerCase().includes(this.model1.warranty_number.toLowerCase())
	      );
	    }
		
	  },
	methods: {
		changestar(){
			if(this.$refs.starscore1._data.activeIndex<=3){
				
				this.opiniondisplay = true;
			}else{
				this.opiniondisplay = false;
			}
		},
		submit() {
			// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
		 	this.$refs.form1.validate().then(res => {
				//uni.$u.toast('校验通过')
				if(this.suggestions==null||this.suggestions.length==0){
					this.$toast("报修单号不正确，请输入正确的VIN码！");
					return;
				}
				this.model1.evaluate_mark = this.$refs.starscore1._data.activeIndex;
				let savedata={//判断前端对象属性为数组
					mainData:this.model1,
					delKeys: null,
					detailData: null
				}
				 this.http.post("/api/fwb_onLine_good_reputation/Add", savedata, true).then((s) => {
					if (s.status){
					  this.$toast("保存成功");
					  let jsonString = s.data;
					  var jsonObject = JSON.parse(jsonString);
					  var id = jsonObject.data.fwb_onLine_good_reputation_id;
					  uni.navigateTo({
					  	url: "/pages/mytable/fwb_turnable_lottery/fwb_turntable_lottery?id="+id
					  }) 
					}else{
					  this.$toast(s.message);
					}
				}) 
			}).catch(errors => {
				uni.$u.toast('校验失败')
			}) 
		},
		reset() {
			const validateList = ['evaluater_name', 'warranty_number']
			this.$refs.form1.resetFields()
			this.$refs.form1.clearValidate()
			setTimeout(()=>{
				this.$refs.form1.clearValidate(validateList)
				// 或者使用 this.$refs.form1.clearValidate()
			},10)
		},
		onInput() {
		      // 可以在这里添加对后端的查询请求
		      // 例如使用 axios.get('/api/search', { params: { query: this.searchQuery } })...
		      this.showSuggestions = true;
		},
		getVin(){
			let vin = this.model1.vin;
			let url = "/api/fwb_onLine_good_reputation/getRepairNoListByDMSVIN?vin="+vin;
			this.http.post(url, null, true).then((s) => {
			if(s==null||s.length==0){
				this.model1.warranty_number = "";
				this.suggestions = [];
				this.flag = true;
				this.$toast("没有找到相关的报修单号，请输入正确的VIN码！");
				
			}else{
				this.suggestions = s;
			}
			
			}) 
		},
		selectSuggestion(item) {
		  this.model1.warranty_number = item;
		  this.showSuggestions = false;
		},
		hideSuggestions() {
		  // 使用 setTimeout 来避免点击建议时触发 blur 事件
		  setTimeout(() => {
			this.showSuggestions = false;
		  }, 200);
		},
		getRepairList(){
			this.http.post("/api/fwb_onLine_good_reputation/getRepairListByDMS", null, true).then((s) => {
			this.suggestions = s;
			}) 
		}
		
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	// this.$refs.uForm.setRules(this.rules)
    },
	mounted() {
		//this.getRepairList();
		var a = document.getElementsByClassName('uni-page-head-hd')[0];
		a.style.display = 'none';
	}
	
};
</script>

<style lang="scss">
	.title{
		display: flex;
		justify-content: center;
	}
	.bxdh{
		::v-deep .u-form-item__body{
			align-items: flex-start;
		}
		::v-deep .u-form-item__body__right__content__slot{
			flex-direction:column;
			align-items: flex-start;
		}
	}
	ul {  
	  list-style: none;  
	  padding: 0;  
	}  
	  
	li {  
	  cursor: pointer;  
	  padding: 5px;  
	  border-bottom: 1px solid #ddd;  
	}  
	  
	li:hover {  
	  background-color: #f0f0f0;  
	}  
</style>
